<template>
    <div>
        <a-form-item :label="item.label">
            <a-select :show-search="true" @search="search" :open="isSelectOpen" @focus="handFous" @blur="handBlur"
                :mode="item.mode"
                v-decorator="[item.dataIndex, { rules: [{ required: item.required, message: getMessage(item) }] }]"
                @change="onSelectChange" :labelInValue="true" :filter-option="filterOption">
                <a-select-option v-for="item in selectFilterList" :key="item.id" :value="item.id">
                    {{ item.name }}
                </a-select-option>
                <div slot="dropdownRender" slot-scope="menu" @mousedown="e => e.preventDefault()">
                    <v-nodes :vnodes="menu" />
                    <a-space
                        style="justify-content: center;width: 100%;padding: 4px 0px;border-top: 1px solid #cdcdcd54;">
                        <a-pagination v-model="current" size="small" :pageSize="pageSize" :total="allData.length" show-less-items />
                    </a-space>
                </div>
            </a-select>
        </a-form-item>
    </div>
</template>

<script>
import { getMessage } from './js/js';

export default {
    components: {
        VNodes: {
            functional: true,
            render: (h, ctx) => ctx.props.vnodes,
        },
    },
    props: {
        item: {
            type: Object,
            default: () => { }
        },
        formVal: {
            type: Object,
            default: () => { }
        },
        formData: {
            type: [Array, Object],
            default: () => []
        },
        form: {
            type: [Array, Object, String],
        }
    },
    data() {
        return {
            pageSize: 20, // 每页数据条数
            current: 1, // 当前页码
            keyWord: '',
            allData: [], // 存储所有数据
            isSelectOpen: false,
        };
    },
    mounted() {
    },
    methods: {
        handBlur() {
            this.isSelectOpen = false;
        },
        handFous() {
            this.isSelectOpen = true;
        },
        onSelectChange() {
            if (this.item.mode) {
            } else {
                this.handBlur();
            }
        },
        search(e) {
            this.current = 1;
            this.keyWord = e;
        },
        filterOption(input, option) {
            return option
        },
        getMessage,
    },
    computed: {
        selectFilterList() {
            let res = JSON.parse(JSON.stringify(this.item.data));
            if (this.keyWord) {
                res = res.filter(val => val.name.includes(this.keyWord));
            }
            this.allData = res;
            let cur = this.current;
            res = res.filter((v, i) => i >= ((cur - 1) * this.pageSize) && (i < ((cur) * this.pageSize)))
            return res;
        }
    },
};
</script>
<style lang="less" scoped>
.selectWrap {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
</style>
